<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 管理系统大布局 - Layui</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
              <!-- 内容主体区域 -->
        <div style="padding: 15px;">
<div class="layui-fluid">
    <div class="charts layui-row layui-col-space15">

        <div class="layui-col-sm12 layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div><span>当日体温数据</span></div>
                    <div>
                        <blockquote th:if="${temperature gt 0}" class="layui-elem-quote">请通知学校疫情防控小组人员送学生去医院诊治
                        </blockquote>
                    </div>
                </div>
                <div class="layui-card-body" style="min-height: 380px;">
                    <div id="main1" class="layui-col-sm12" style="height: 380px;"></div>
                </div>
            </div>
        </div>

    </div>
</div>
</div>
</body>
<!-- 引入echarts插件 -->
<script src="/echarts/echarts.min.js"></script>
<script src="/layui/layui.js"></script>
<script type="text/javascript" >
    $ = layui.jquery;
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main1'));

    $.get('/report/chart/temperature').done(function (res) {
        myChart.setOption({
            title: {},
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            color: ['#45C2E0', '#C1EBDD', '#FFC851', '#5A5476', '#1869A0', '#FF9393'],
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2,


            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            series: [{
                name: '体温数据',
                type: 'pie',
                radius: ['40%', '70%'],
                data: res.data
            }]
        });
    })
</script>
</html>